import React,{ useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import {AtActionSheet} from 'taro-ui'
import { View, Text, Button, Image } from '@tarojs/components'
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/action-sheet.scss";
import './index.scss'

export default function PowerDetail() {
  const [showModal,setShowModal] = useState(false)
  const [info,setInfo] = useState({})
  const {router} = Taro.getCurrentInstance()
  useEffect(()=>{
    Taro.$get(`/store/power-bank-order/${router.params.orderId}`).then(res=>{
      if(res.code == '1') setInfo(res.content)
    })
  },[])
  return (
    <View className='power-detail'>
      <View className="detail-status">
        <View className="status-title">{info.finalStatusDesc}</View>
        <Button className="status-contact" open-type="contact">
          <Image className='contact-img' src={require('@/images/contact.svg')} /> 联系客服
        </Button>
      </View>

      <View className="detail-header">
        <View className="header-info">
          <View className="info-span">
            已租借：<Text style={{fontSize: 18}}>{info.useMinute}</Text> <Text>分</Text>
          </View>
          <View className="info-span">
            预估金额：<Text style={{fontSize: 18}}>{info.predictPrice}</Text> <Text>元</Text>
          </View>
        </View>
        <View className="header-intro">
          <View className="intro-item">
            <View className="h3">租借地点</View>
            <View className="p">{info.sellerUserName}</View>
          </View>
          <View className="intro-item">
            <View className="h3">收费标准</View>
            <View className="p">{info?.bankConfig?.configStringDesc}</View>
          </View>
        </View>
        <View className="header-button">
          <View style={{fontSize:14}}>不想还了? 点击留下充电宝</View>
          (留有充电口，可以为他充电哦)
        </View>
        <View className="header-footer">[请把充电宝归还至影院前台柜机]</View>
      </View>

      {/* <View className="detail-banner">
        <View className="banner-icon">广告</View>
      </View> */}

      <View className="detail-main">
        <View className="main-title">{info.sellerUserName}</View>
        <View className="main-list">
          <View className="list-item">
            <Text className='item-span'>订单编号 </Text> {info.orderId} <Text className='span' style={{color: '#90989F',margin: '0 6px'}}>|</Text> <Text className='span' onClick={()=>{
              Taro.setClipboardData({
                data:info.orderId,
                success: () => {
                  Taro.showToast({
                    title:'复制成功',
                    icon:'success'
                  })
                }
              })}}>复制</Text>
          </View>
          <View className="list-item">
            <Text className='item-span'>下单时间 </Text> {info.rentalTime}
          </View>
          <View className="list-item">
            <Text className='item-span'>充电宝SN </Text> {info.powerBankId}
          </View>
        </View>
        {/* <View className="main-footer" onClick={()=>{setShowModal(true)}}>计费规则 <View className='at-icon at-icon-chevron-right'></View></View> */}
        <AtActionSheet isOpened={showModal} title='计费规则' onClose={()=>{setShowModal(false)}}>
          <View className="detail-popup">
            <View className="popup-list">
              <View className="list-item">
                <View className="item-price">{info?.bankConfig?.price} <Text>元</Text></View>
                单价(30分钟)
              </View>
              <View className="list-item">
                <View className="item-price">{info?.bankConfig?.dayMaxPrice} <Text>元</Text></View>
                每24H封顶金额
              </View>
              <View className="list-item">
                <View className="item-price">{info?.bankConfig?.maxPrice} <Text>元</Text></View>
                订单封顶金额
              </View>
            </View>
            <View className="popup-footer">({info?.bankConfig?.freeMinutes}分钟内归还免费，每不足30分钟，按照30分钟计费)</View>
          </View>
        </AtActionSheet>
      </View>
    </View>
  )
}